import React, { useEffect, useState } from 'react';
import useStore from '@/context/useStore';
import { observer } from 'mobx-react-lite';
import styles from './index.less';
import { Input,Table, Breadcrumb ,Pagination,Menu,Switch,message,Modal} from 'antd';
import { SearchOutlined,AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import { IAllParams, IAllPageNumData, ISelectPageNumData, ISelectParams } from '@/utils/manageInterface'
import Editor from 'for-editor';
import Tabels from '@/components/tabels/tabels';
import { history } from 'umi';
import Cookies from 'js-cookie';

const { Search } = Input;
const { SubMenu } = Menu;
const status = ['全部', '精品', '认证', '被屏蔽'];
let toolbar: {
  h1: true, // h1
  h2: true, // h2
  h3: true, // h3
  h4: true, // h4
  img: true, // 图片
  link: true, // 链接
  code: true, // 代码块
  preview: true, // 预览
  expand: true, // 全屏
  /* v0.0.9 */
  undo: true, // 撤销
  redo: true, // 重做
  save: true, // 保存
  /* v0.2.3 */
  subfield: true, // 单双栏模式
}

const Manage: React.FC = () => {

  const columns = [
    {
      title:  (text: string) =><div className={styles.headtabel}>
          <p>全选</p>
          <div>
            <button onClick={batchUpdate}>批量问答</button>
            <button onClick={allBbatchUpdate}>批量选择相似问题答案</button>
          <Input onChange={(e)=>valueChange(e.target.value)} value={value} suffix={<SearchOutlined onClick={onPressEnter}/>} onPressEnter={onPressEnter} placeholder="请搜索答案"/>
          </div>
        </div>,
      dataIndex: 'name',
      // width: 500,
      colSpan: 3,
      render: (text: string) => <a>{text}</a>,
    },
    {
      // title: 'Age',
      colSpan:0,
      dataIndex: 'age',
    },
    {
      // title: 'Address',
      colSpan:0,
      dataIndex: 'address',
    },
  ];
   //输入框变化
  function valueChange(value:string) {
    setValue(value)
  }
  //搜索答案
  function onPressEnter() {
    manage.allPageNum({...params,searchTitle:value})
  }
  // rowSelection object indicates the need for row selection
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows:IAllPageNumData) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    // getCheckboxProps: (record:IAllPageNumData) => ({
    //   disabled: record.name === 'Disabled User', // Column configuration not to be checked
    //   name: record.name,
    // }),
  };

  const [selectionType, setSelectionType] = useState<'checkbox'>('checkbox');
  let { manage } = useStore();
  let [i, setI] = useState(0);
  let [value, setValue] = useState('');
  let [headI, setHeadI] = useState("");
  let [searchValue, setSearchValue] = useState("");
  let [ind, setInd] = useState(0);
  let [params, setParams] = useState<IAllParams>({ pageNum: 1, pageSize: 10, classId: 9, searchTitle: '', status: '' });
  let [selectparams, setSelectParams] = useState<ISelectParams>({ pageNum: 1, pageSize: 10, isRight: 0, type: '', questionTitle: '' });
  let [data, setData] = useState<IAllPageNumData[]>([]);
  let [filteredValue, setFilteredValue] = useState([]);
  let [modal2Visible, setModal2Visible] = useState(false);
  let [modal1Visible, setModal1Visible] = useState(false);
  let [modal3Visible, setModal3Visible] = useState(false);
  let [replyContext, setReplyContext] = useState('');
  let [waittabel, setWaittabel] = useState<IAllPageNumData[]>([]);
  let [alltabel, setAlltabel] = useState<IAllPageNumData[]>([]);
  let [selectPageData, setSelectPageData] = useState<ISelectPageNumData[]>([]);
  let [quality, setQuality] = useState(1);
  let [noQuality, setNoQuality] = useState(0);

  useEffect(() => {
    let flag = false;
    async function ync() {
      let res = await manage.getClassInfo();
      setWaittabel(await manage.waitPageNum(params));
      if (res.code !== 200) {
        Cookies.remove("Admin-Token")
        message.info('身份信息失效！请重新登录')
        // history.replace('/?redirect='+encodeURIComponent(location.pathname))
        history.replace('/')
      }
      setWaittabel(await manage.waitPageNum(params));
      setAlltabel(await manage.allPageNum(params));
    }
    if (!flag) {
      ync()
    }
    return ()=>{flag=true}
  }, [])

  useEffect(() => {
    setData(waittabel&&waittabel.map((item,ind) => {
      return {
        ...item,
        key: ind+1,
        name:<div className={styles.tabelitem}>
            <p><span>{item.className}</span><span>{item.qUserName}</span><span>{item.replyTime}发布</span><span>实训类型：{item.typeNum == "0" ? <b>实训</b> :<b>面试</b>}</span><span></span></p>
            <p>{ item.quality?<img style={{width: "50px"}} src="http://111.203.59.61:8060/static/img/boutique.fc46be52.svg" />:''}<img src="http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg" alt="" /><span>{item.questionTitle}</span></p>
            <p>{item.questionContent}</p>
            <p>{item.labels.map((ite, ind) => <span key={ind}>{ite}</span>)}</p>
          <div>
            <span onClick={()=>history.push('/teachers/manage/answerDetail/answerDetail?answerId='+item.answerId)}>回答</span>
            <span onClick={allBbatchUpdates}>选择其他有 “正确答案” 的类似问题</span>
            <span onClick={()=>isQuality(item.quality,item.answerId)}>{item.quality?"取消精品":"设为精品"}</span>
          </div>
        </div>,  
        age: <div>
          <p><img style={{width: "20px",height:"20px"}} src="" alt="" /> {item.answerCount}</p>
          <div className={styles.alllook}><Menu
              style={{ width: 256,color:"#679cf6" }}
              // defaultSelectedKeys={['1']}
              // defaultOpenKeys={['sub1']}
              mode="inline"
            >
            <SubMenu key="sub1" title="查看全部" style={{ fontSize:"16px"}}>
            </SubMenu>
          </Menu></div>
        </div>,
        address: <Switch defaultChecked={!!Number(item.typeNum)} onChange={(onChangeFlag)}/>,
      }
    }))
  },[waittabel])

  useEffect(() => {
    ind?setData(manage.allPageNumData.map((item:any,ind:any) => {
      return {
        ...item,
        key: ind+1,
        name:<div className={styles.tabelitem}>
            <p><span>{item.className}</span><span>{item.qUserName}</span><span>{item.replyTime}发布</span><span>实训类型：{item.typeNum == "0" ? <b>实训</b> :<b>面试</b>}</span><span></span></p>
            <p>{ item.quality?<img style={{width: "50px"}} src="http://111.203.59.61:8060/static/img/boutique.fc46be52.svg" />:''}<img src="http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg" alt="" /><span>{item.questionTitle}</span></p>
            <p>{item.questionContent}</p>
            <p>{item.labels.map((ite:any, ind:any) => <span key={ind}>{ite}</span>)}</p>
          <div>
            <span onClick={()=>history.push('/teachers/manage/answerDetail/answerDetail?answerId='+item.answerId)}>回答</span>
            <span onClick={allBbatchUpdates}>选择其他有 “正确答案” 的类似问题</span>
            <span onClick={()=>isQuality(item.quality,item.answerId)}>{item.quality?"取消精品":"设为精品"}</span>
          </div>
        </div>,  
        age: <div>
          <p><img style={{width: "20px",height:"20px"}} src="" alt="" /> {item.answerCount}</p>
          <div className={styles.alllook}><Menu
              style={{ width: 256,color:"#679cf6" }}
              // defaultSelectedKeys={['1']}
              // defaultOpenKeys={['sub1']}
              mode="inline"
            >
            <SubMenu key="sub1" title="查看全部" style={{ fontSize:"16px"}}>
            </SubMenu>
          </Menu></div>
        </div>,
        address: <Switch defaultChecked={!!Number(item.typeNum)} onChange={(onChangeFlag)}/>,
      }
    })):''
  },[manage.allPageNumData])

  useEffect(() => {
    // console.log(selectPageData)
    setSelectPageData(manage.selectPageNumData)
    setSelectParams({...selectparams,questionTitle:searchValue})
  },[manage.selectPageNumData,searchValue])
  //头部状态切换
  function changeI(i: number) {
    setI(i)
    // setParams({ ...params, status: `${i}` })
    async function ync() {
      // setAlltabel(await manage.allPageNum({...params,status:`${i}`})) 
      let res = await manage.allPageNum({ ...params, status: `${i}` })
      setData(res.map((item:any,ind:any) => {
        return {
          ...item,
          key: ind+1,
          name:<div className={styles.tabelitem}>
              <p><span>{item.className}</span><span>{item.qUserName}</span><span>{item.replyTime}发布</span><span>实训类型：{item.typeNum == "0" ? <b>实训</b> :<b>面试</b>}</span><span></span></p>
              <p>{ item.quality?<img style={{width: "50px"}} src="http://111.203.59.61:8060/static/img/boutique.fc46be52.svg" />:''}<img src="http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg" alt="" /><span>{item.questionTitle}</span></p>
              <p>{item.questionContent}</p>
              <p>{item.labels.map((ite:any, ind:any) => <span key={ind}>{ite}</span>)}</p>
            <div>
              <span onClick={()=>history.push('/teachers/manage/answerDetail/answerDetail?answerId='+item.answerId)}>回答</span>
              <span onClick={allBbatchUpdates}>选择其他有 “正确答案” 的类似问题</span>
              <span onClick={()=>isQuality(item.quality,item.answerId)}>{item.quality?"取消精品":"设为精品"}</span>
            </div>
          </div>,  
          age: <div>
            <p><img style={{width: "20px",height:"20px"}} src="" alt="" /> {item.answerCount}</p>
            <div className={styles.alllook}><Menu
                style={{ width: 256,color:"#679cf6" }}
                // defaultSelectedKeys={['1']}
                // defaultOpenKeys={['sub1']}
                mode="inline"
              >
              <SubMenu key="sub1" title="查看全部" style={{ fontSize:"16px"}}>
              </SubMenu>
            </Menu></div>
          </div>,
          address: <Switch defaultChecked={!!Number(item.typeNum)} onChange={(onChangeFlag)}/>,
        }
      }))
    }
    if (ind) {
      ync()
    }
  }
  function onChange(e: { target: { checked: any; }; }) {
    // console.log( e instanceof )
    console.log(`checked = ${e.target.checked}`);
  }
  const onSearch = (value: string) => console.log(value);
  //复选框变化
  function checkedChange(e: any) {
    setFilteredValue(e)
    // console.log(filteredValue, 3333)
  }
  //表格批量回答
  function batchUpdate() {
    if (filteredValue.length) {
      setModal1Visible(true)
    } else {
      setModal2Visible(true)
    }
  }
   //表格批量选择类似问题答案
  function allBbatchUpdate() {
    //  console.log(filteredValue)
    if (filteredValue.length) {
      setModal3Visible(true)
      async function ync() {
        setSelectPageData(await manage.selectAnswerList(selectparams));
      }
      ync()
    } else {
      setModal2Visible(true)
    }
  }
   //表格批量选择类似问题答案
   function allBbatchUpdates() {//本来是与上一个一样，但是有bug，打印的filteredValue一个是有长度一个是没有
     setModal3Visible(true)
     async function ync() {
       setSelectPageData(await manage.selectAnswerList(selectparams));
     }
     ync()
 }
 
  //表格屏蔽开关
  function onChangeFlag(checked: any) {
    // console.log(`switch to ${checked}`);
    checked?message.success({content:'屏蔽成功',className:styles.message}):message.warn({content:'取消屏蔽成功',className:styles.messages})
  }
  //弹框头部状态切换
  function headChange(i:number) {
    if (i === 0) {
      setHeadI('')
      manage.selectAnswerList({...selectparams,type:''});
    } else if (i === 1) {
      setHeadI('0')
      manage.selectAnswerList({...selectparams,type:"0"});
    } else if (i === 2) {
      setHeadI('4')
      manage.selectAnswerList({...selectparams,type:"4"});
    } else if (i === 3) {
      setHeadI('1')
      manage.selectAnswerList({...selectparams,type:"1"});
    } else if (i === 4) {
      setHeadI('2')
      manage.selectAnswerList({...selectparams,type:"2"});
    } else if (i === 5) {
      setHeadI('3')
      manage.selectAnswerList({...selectparams,type:"3"});
    }
  }

  //搜索问题
  function searchProblem(value: string) {
    setSearchValue(value)
    manage.selectAnswerList({...selectparams,questionTitle:value,type:headI});
  }

  //编辑回答问题
  function handleChange(value:string) {
    setReplyContext(value)
  }

  //弹框编辑回答问题
  async function tosetModal1Visible(modal1Visible:boolean) {
    setModal1Visible(modal1Visible);
    let questionIdList = filteredValue.map(item => {
      return alltabel[item-1].answerId;
    })
    let res=await manage.replyRightAnswer({ questionIdList, replyContext })
    if (res.code === 200) {
      // message.info('回答成功')
      message.success({content:'回答成功',className:styles.message})
      setReplyContext('')
    } else {
      // message.info('回答失败')
      message.error({content:'回答失败',className:styles.messagess})
    }
  }
  //弹框显示类似答案
  async function tosetModal3Visible(modal1Visible: boolean) {
    setSearchValue('')
    setModal3Visible(modal1Visible);
    let questionIdList = filteredValue.map(item => {
      return alltabel[item-1].answerId;
    })
    let res=await manage.replyRightAnswer({ questionIdList, replyContext })
    if (res.code === 200) {
      // message.info('批量回复成功')
      message.success({content:'批量回复成功',className:styles.message})
    } else {
      // message.info('批量恢复失败')
      message.error({content:'批量回复失败',className:styles.messagess})
    }
  }
  //只看正确答案，通过孙组件回调触发
  function changeanswer(e:boolean) {
    if (e) {
      manage.selectAnswerList({...selectparams,isRight:Number(e)});
    } else {
      manage.selectAnswerList({...selectparams,isRight:Number(e)});
    }
  }
  //切换问答
  function answers(i:number) {
    setInd(i)
    if (i) {
      // manage.allPageNum(params);
      async function ync() {
        setAlltabel(await manage.allPageNum(params))  
      }
      ync()
      setData(alltabel&&alltabel.map((item,ind) => {
        return {
          ...item,
          key: ind+1,
          name:<div className={styles.tabelitem}>
              <p><span>{item.className}</span><span>{item.qUserName}</span><span>{item.replyTime}发布</span><span>实训类型：{item.typeNum == "0" ? <b>实训</b> :<b>面试</b>}</span><span></span></p>
              <p>{ item.quality?<img style={{width: "50px"}} src="http://111.203.59.61:8060/static/img/boutique.fc46be52.svg" />:''}<img src="http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg" alt="" /><span>{item.questionTitle}</span></p>
              <p>{item.questionContent}</p>
              <p>{item.labels.map((ite, ind) => <span key={ind}>{ite}</span>)}</p>
            <div>
              <span onClick={()=>history.push('/teachers/manage/answerDetail/answerDetail?answerId='+item.answerId)}>回答</span>
              <span onClick={allBbatchUpdates}>选择其他有 “正确答案” 的类似问题</span>
              {item.quality?<span onClick={()=>isQuality(item.quality,item.answerId)}>取消精品</span>:<span onClick={()=>isQuality(item.quality,item.answerId)}>设为精品</span>}
            </div>
          </div>,  
          age: <div>
            <p><img style={{width: "20px",height:"20px"}} src="" alt="" /> {item.answerCount}</p>
            <div className={styles.alllook}><Menu
                style={{ width: 256,color:"#679cf6" }}
                // defaultSelectedKeys={['1']}
                // defaultOpenKeys={['sub1']}
                mode="inline"
              >
              <SubMenu key="sub1" title="查看全部" style={{ fontSize:"16px"}}>
              </SubMenu>
            </Menu></div>
          </div>,
          address: <Switch defaultChecked={!!Number(item.typeNum)} onChange={(onChangeFlag)}/>,
        }
      }))
    } else {
      // manage.waitPageNum(params);
      async function ync() {
        setWaittabel(await manage.waitPageNum(params));
      }
      ync()
      setData(waittabel&&waittabel.map((item,ind) => {
        return {
          ...item,
          key: ind+1,
          name:<div className={styles.tabelitem}>
              <p><span>{item.className}</span><span>{item.qUserName}</span><span>{item.replyTime}发布</span><span>实训类型：{item.typeNum == "0" ? <b>实训</b> :<b>面试</b>}</span><span></span></p>
              <p>{ item.quality?<img style={{width: "50px"}} src="http://111.203.59.61:8060/static/img/boutique.fc46be52.svg" />:''}<img src="http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg" alt="" /><span>{item.questionTitle}</span></p>
              <p>{item.questionContent}</p>
              <p>{item.labels.map((ite, ind) => <span key={ind}>{ite}</span>)}</p>
            <div>
              <span onClick={()=>history.push('/teachers/manage/answerDetail/answerDetail?answerId='+item.answerId)}>回答</span>
              <span onClick={allBbatchUpdates}>选择其他有 “正确答案” 的类似问题</span>
              <span onClick={()=>isQuality(item.quality,item.answerId)}>{item.quality?"取消精品":"设为精品"}</span>
            </div>
          </div>,  
          age: <div>
            <p><img style={{width: "20px",height:"20px"}} src="" alt="" /> {item.answerCount}</p>
            <div className={styles.alllook}><Menu
                style={{ width: 256,color:"#679cf6" }}
                // defaultSelectedKeys={['1']}
                // defaultOpenKeys={['sub1']}
                mode="inline"
              >
              <SubMenu key="sub1" title="查看全部" style={{ fontSize:"16px"}}>
              </SubMenu>
            </Menu></div>
          </div>,
          address: <Switch defaultChecked={!!Number(item.typeNum)} onChange={(onChangeFlag)}/>,
        }
      }))
    }
  }
  // function setModal2Visible(modal2Visible) {
  //   this.setState({ modal2Visible });
  // }
 //页码切换
function pageChange(e:any) {
  manage.selectAnswerList({...selectparams,pageNum:e});
}
//设置精品切换
async function isQuality(quality:number,id:string){
  // quality ? manage.deleteQualityAnswerId(id) : manage.qualityAnswerId(id)
  if (quality) {
    let res =await manage.deleteQualityAnswerId(id)
    if (res.code == 200) {
      // message.info('取消精品成功')
      message.warn({content:'取消精品成功',className:styles.messages})
      setI(0)
      alltabel.filter(item => item.answerId == id)[0].quality = 0
      setData(alltabel.map((item,ind) => {
        return {
          ...item,
          key: ind+1,
          name:<div className={styles.tabelitem}>
              <p><span>{item.className}</span><span>{item.qUserName}</span><span>{item.replyTime}发布</span><span>实训类型：{item.typeNum == "0" ? <b>实训</b> :<b>面试</b>}</span><span></span></p>
              <p>{ item.quality?<img style={{width: "50px"}} src="http://111.203.59.61:8060/static/img/boutique.fc46be52.svg" />:''}<img src="http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg" alt="" /><span>{item.questionTitle}</span></p>
              <p>{item.questionContent}</p>
              <p>{item.labels.map((ite, ind) => <span key={ind}>{ite}</span>)}</p>
            <div>
              <span onClick={()=>history.push('/teachers/manage/answerDetail/answerDetail?answerId='+item.answerId)}>回答</span>
              <span onClick={allBbatchUpdates}>选择其他有 “正确答案” 的类似问题</span>
              <span onClick={()=>isQuality(item.quality,item.answerId)}>{item.quality?"取消精品":"设为精品"}</span>
            </div>
          </div>,  
          age: <div>
            <p><img style={{width: "20px",height:"20px"}} src="" alt="" /> {item.answerCount}</p>
            <div className={styles.alllook}><Menu
                style={{ width: 256,color:"#679cf6" }}
                // defaultSelectedKeys={['1']}
                // defaultOpenKeys={['sub1']}
                mode="inline"
              >
              <SubMenu key="sub1" title="查看全部" style={{ fontSize:"16px"}}>
              </SubMenu>
            </Menu></div>
          </div>,
          address: <Switch defaultChecked={!!Number(item.typeNum)} onChange={(onChangeFlag)}/>,
        }
      }))
    }
  } else {
    let res =await manage.qualityAnswerId(id)
    if (res.code == 200) {
      // message.info('设置精品成功')
      message.success({content:'设置精品成功',className:styles.message})
      setI(0)
      alltabel.filter(item => item.answerId == id)[0].quality = 1
      setData(alltabel.map((item,ind) => {
        return {
          ...item,
          key: ind+1,
          name:<div className={styles.tabelitem}>
              <p><span>{item.className}</span><span>{item.qUserName}</span><span>{item.replyTime}发布</span><span>实训类型：{item.typeNum == "0" ? <b>实训</b> :<b>面试</b>}</span><span></span></p>
              <p>{ item.quality?<img style={{width: "50px"}} src="http://111.203.59.61:8060/static/img/boutique.fc46be52.svg" />:''}<img src="http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg" alt="" /><span>{item.questionTitle}</span></p>
              <p>{item.questionContent}</p>
              <p>{item.labels.map((ite, ind) => <span key={ind}>{ite}</span>)}</p>
            <div>
              <span onClick={()=>history.push('/teachers/manage/answerDetail/answerDetail?answerId='+item.answerId)}>回答</span>
              <span onClick={allBbatchUpdates}>选择其他有 “正确答案” 的类似问题</span>
              <span onClick={()=>isQuality(item.quality,item.answerId)}>{item.quality?"取消精品":"设为精品"}</span>
            </div>
          </div>,  
          age: <div>
            <p><img style={{width: "20px",height:"20px"}} src="" alt="" /> {item.answerCount}</p>
            <div className={styles.alllook}><Menu
                style={{ width: 256,color:"#679cf6" }}
                // defaultSelectedKeys={['1']}
                // defaultOpenKeys={['sub1']}
                mode="inline"
              >
              <SubMenu key="sub1" title="查看全部" style={{ fontSize:"16px"}}>
              </SubMenu>
            </Menu></div>
          </div>,
          address: <Switch defaultChecked={!!Number(item.typeNum)} onChange={(onChangeFlag)}/>,
        }
      }))
    }
  }
// console.log(alltabel.filter(item=>item.answerId==id)[0].quality=0)
}
  return <div className={styles.managebody}>
    <div className={styles.managehead}>
    <Breadcrumb style={{ padding: "16px", margin: "5px 0 0 22px", fontSize: "15px" }}>
            <Breadcrumb.Item>问答</Breadcrumb.Item>
            <Breadcrumb.Item>待处理问答</Breadcrumb.Item>
        </Breadcrumb>
    </div>
    <div className={styles.managemain}>
      <div><span>来源：</span><span>{manage.getClassInfoData[0]&&manage.getClassInfoData[0].classname}</span></div>
      <div>
        <span>状态：</span>
        {
          status.map((item, ind) => {
            return <span key={ind} className={ind === i ? styles.active : ""} onClick={() => changeI(ind)}>{item}</span>
          })
        }
      </div>
    </div>
    <div className={styles.managefoot}>
        <div><span className={!ind?styles.active:""}></span><h2 onClick={()=>answers(0)}>待处理问答</h2><h2 onClick={()=>answers(1)}>所有问答</h2><span className={ind?styles.active:""}></span></div>
        {/* <div className={styles.headtabel}>
      <p><Checkbox onChange={onChange}>全选</Checkbox></p>
      <div>
        <button>批量问答</button>
        <button>批量选择相似问题答案</button>
        <Input suffix={<SearchOutlined />} placeholder="请搜索答案"/>
      </div>
      {
        manage.allPageNumData.map(item=>{
          
        })
      }
    </div>, */}
        <div>
            {/* <Radio.Group
              onChange={({ target: { value } }) => {
                setSelectionType(value);
              }}
              value={selectionType}
            >
              <Radio value="checkbox">Checkbox</Radio>
              <Radio value="radio">radio</Radio>
            </Radio.Group> */}

            {/* <Divider /> */}

            <Table
              rowSelection={{
                type: selectionType,
                columnWidth:130,
                // columnTitle:<Checkbox onChange={onChange}>全选</Checkbox>,
                // ...rowSelection,
                onChange:checkedChange
              }}
              columns={columns}
              dataSource={data}
              pagination={false}
            />
            <Pagination defaultCurrent={1} total={manage.total||1} className={styles.pagination} showQuickJumper={true}/>
          </div>
        </div>
        <Modal
              title="提示"
              centered
              visible={modal2Visible}
              onOk={() => setModal2Visible(false)}
              onCancel={() => setModal2Visible(false)}
              cancelText="取消"
              okText="确定"
              wrapClassName={styles.title}
            >
              <p>请勾选问题之后再进行操作!</p>
        </Modal>
        <Modal
              style={{height:"600px"}}
              title="回答"
              centered
              visible={modal1Visible}
              onOk={() => tosetModal1Visible(false)}
              onCancel={() => setModal1Visible(false)}
              cancelText="取消"
              okText="确定"
              width="70%"
              // wrapClassName={styles.title}
            >
          <Editor preview={true} subfield={true} height="500px" value={replyContext} onChange={(value) =>handleChange(value)} toolbar={toolbar}/>
        </Modal>
        <Modal
              style={{height:"600px"}}
              title="选择其它有“正确答案”的类似问题"
              centered
              visible={modal3Visible}
              onOk={() => tosetModal3Visible(false)}
              onCancel={() => setModal3Visible(false)}
              cancelText="取消"
              okText="确定"
              width="70%"
              // wrapClassName={styles.title}
            >
          <Tabels headChange={headChange} searchProblem={searchProblem} selectPageData={selectPageData} total={manage.total||1} changeanswer={changeanswer} pageChange={pageChange}/>
      </Modal>
  </div>
}
export default observer(Manage)